<template>
	<div class="table-container">
		<vab-query-form>
			<vab-query-form-left-panel>
				<el-button icon="el-icon-plus" type="primary" @click="add" v-if="button.添加">
					添加
				</el-button>
				<el-button icon="el-icon-delete" type="danger" @click="del" v-if="button.批量删除">
					批量删除
				</el-button>
				<el-button type="primary" @click="testMessage" v-if="button.showToast">showToast</el-button>
				<el-button type="primary" @click="testALert" v-if="button.showMsg">showMsg</el-button>
				<el-button type="primary" @click="testConfirm" v-if="button.confirm">confirm</el-button>
				<el-button type="primary" @click="testNotify" v-if="button.notify">notify</el-button>
				<el-button type="primary" icon="document" @click="baseExportExcel($refs.tableSort.$el, '订单列表')"
					v-if="button.导出">导出</el-button>
			</vab-query-form-left-panel>
			<vab-query-form-right-panel>
				<el-form ref="form" :model="search" @submit.native.prevent>
					<el-form-item>
						<el-input v-model="search.title" placeholder="标题" />
					</el-form-item>
					<el-form-item>
						<el-input v-model="search.author" placeholder="作者" />
					</el-form-item>
					<el-form-item>
						<el-input v-model="search.author" placeholder="作者" />
					</el-form-item>
					<el-form-item>
						<el-input v-model="search.author" placeholder="作者" />
					</el-form-item>
					<el-form-item>
						<el-input v-model="search.author" placeholder="作者" />
					</el-form-item>
					<el-form-item>
						<el-button v-if="button.查询" icon="el-icon-search" type="primary" native-type="submit"
							@click="getSearchList">
							查询
						</el-button>
					</el-form-item>
				</el-form>
			</vab-query-form-right-panel>
		</vab-query-form>

		<el-table id="tableList" ref="tableSort" v-loading="loading" :data="list" @selection-change="setSelected"
			@sort-change="sortChange">
			<el-table-column type="selection" width="55"></el-table-column>
			<el-table-column label="序号" width="95">
				<template v-slot="scope">
					{{ scope.$index + 1 }}
				</template>
			</el-table-column>
			<el-table-column prop="title" label="标题"></el-table-column>
			<el-table-column label="作者" prop="author"></el-table-column>
			<el-table-column label="头像">
				<template v-slot="{ row }">
					<el-image :preview-src-list="imageList" :src="row.img"></el-image>
				</template>
			</el-table-column>
			<el-table-column label="点击量" prop="pageViews" sortable></el-table-column>
			<el-table-column label="状态">
				<template v-slot="{ row }">
					<el-tooltip :content="row.status" class="item" effect="dark" placement="top-start">
						<el-tag :type="row.status | statusFilter">
							{{ row.status }}
						</el-tag>
					</el-tooltip>
				</template>
			</el-table-column>
			<el-table-column label="时间" prop="datetime" width="200"></el-table-column>
			<el-table-column2 :mergenumber="2" v-if="button.添加||button.编辑||button.删除||button.批量删除">
				<template v-slot:preff="scope">
					<el-button type="text" @click="showInfo(scope.row)">不合并的</el-button>
				</template>
				<template v-slot="scope">
					<!-- <selectprint temlate-type-id="1" :detail-row="row.id">
					</selectprint> -->
					<el-button type="text" @click="edit(scope.row)" v-if="button.编辑">编辑</el-button>
					<el-button type="text" @click="del(scope.row)" v-if="button.删除">删除</el-button>
					<el-button type="text" v-if="true">按钮一</el-button>
					<el-button type="text" v-if="false">按钮二</el-button>
				</template>
			</el-table-column2>
		</el-table>
		<el-pagination :current-page="search.index" :page-size="search.size" :total="total"
			@current-change="indexChange" @size-change="sizeChange"></el-pagination>
		<table-edit ref="edit" @getList="getList"></table-edit>
	</div>
</template>

<script>
	import TableEdit from "./components/TableEdit";
	import common from "@/common/common.js";

	export default {
		name: "Table",
		mixins: [common.baseVM],
		components: {
			TableEdit,
		},
		filters: {
			statusFilter(status) {
				const statusMap = {
					published: "success",
					draft: "gray",
					deleted: "danger",
				};
				return statusMap[status];
			},
		},
		data() {
			return {
				button: {
					查询: true,
					添加: true,
					编辑: true,
					删除: true,
					批量删除: true,
					导出: true,
					showToast: true,
					showMsg: true,
					confirm: true,
					notify: true
				},
				list: [],
				imageList: [],
				total: 0,
				selected: [],
				search: {
					index: 1,
					size: 20,
					title: "",
					author: ""
				}
			};
		},
		computed: {},
		created() {
			this.getList();
		},
		methods: {
			showInfo(row) {
				var str = JSON.stringify(row);
				this.showToast(str);
			},
			sortChange() {
				const imageList = [];
				this.$refs.tableSort.tableData.forEach((item, index) => {
					imageList.push(item.img);
				});
				this.imageList = imageList;
			},
			setSelected(val) {
				this.selected = val;
			},
			add() {
				this.$refs["edit"].show();
			},
			edit(row) {
				this.$refs["edit"].show(row);
			},
			doDelete(json) {
				return {
					msg: "成功"
				};
			},
			del(row) {
				if (row.id) {
					this.confirm("你确定要删除当前项吗", async () => {
						const {
							msg
						} = await this.doDelete({
							ids: row.id
						});
						this.showToast(msg, "success");
						this.getList();
					});
				} else {
					if (this.selected.length > 0) {
						const ids = this.selected.map((item) => item.id).join();
						this.confirm("你确定要删除选中项吗", async () => {
							const {
								msg
							} = await this.doDelete({
								ids: ids
							});
							this.showToast(msg, "success");
							this.getList();
						});
					} else {
						this.showToast("未选中任何行", "error");
						return false;
					}
				}
			},
			sizeChange(val) {
				this.search.size = val;
				this.getList();
			},
			indexChange(val) {
				this.search.index = val;
				this.getList();
			},
			getSearchList() {
				this.search.index = 1;
				this.getList();
			},
			getList() {
				function getListTemp(form) {
					var list = {
						data: [{
								"uuid": "6e4d4CEF-E3c6-d962-ccb4-FC21Ec3BE067",
								"id": 1,
								"title": "称。",
								"status": "published",
								"author": "马娜",
								"datetime": "2015-03-25 05:19:35",
								"pageViews": 4129,
								"img": "https://picsum.photos/200/200?random=c20Ff3dc-90C5-CBFC-831A-C7Fe1d9cf5aC",
								"smallImg": "https://picsum.photos/40/40?random=0B8c3Bcd-bCe8-9BD7-A1cC-909f217eCbc4",
								"switch": true,
								"percent": 87
							},
							{
								"uuid": "bD2eA669-2E4A-7D06-55D0-B13b5E2bC8FA",
								"id": 2,
								"title": "万片。",
								"status": "draft",
								"author": "锺秀英",
								"datetime": "1994-01-21 00:04:51",
								"pageViews": 1986,
								"img": "https://picsum.photos/200/200?random=cBD5C86e-711D-F1A8-AAC8-287EC3AcCee7",
								"smallImg": "https://picsum.photos/40/40?random=d1F6B7bB-fa3F-6Eee-e74C-e9bDffdc3C6a",
								"switch": false,
								"percent": 92
							},
							{
								"uuid": "fBC37f61-D94D-d4DB-B8Ba-D2d6c5cebC9B",
								"id": 3,
								"title": "是京。",
								"status": "draft",
								"author": "常娟",
								"datetime": "2008-07-04 08:26:08",
								"pageViews": 4732,
								"img": "https://picsum.photos/200/200?random=9edFCCD3-C9e9-cAb1-254a-E6cB5C1e8e0A",
								"smallImg": "https://picsum.photos/40/40?random=8A8E35d4-BdEb-Ff3E-eA5F-bc4Cd4C4EFDf",
								"switch": true,
								"percent": 92
							},
							{
								"uuid": "FCB0CfFd-C470-7D94-DE9f-fbE6e9Ba95ec",
								"id": 4,
								"title": "须。",
								"status": "deleted",
								"author": "龚娟",
								"datetime": "1995-09-01 01:52:03",
								"pageViews": 4478,
								"img": "https://picsum.photos/200/200?random=557315Df-bbBC-F635-D053-25484e3cC57f",
								"smallImg": "https://picsum.photos/40/40?random=1FA7AF7d-2DD1-DCee-d7ce-739b6fdaBee6",
								"switch": true,
								"percent": 83
							},
							{
								"uuid": "dFE1189C-CCcF-da18-33B0-dCeB55EF59bA",
								"id": 55,
								"title": "装约。",
								"status": "deleted",
								"author": "苏勇",
								"datetime": "1988-07-27 00:44:46",
								"pageViews": 3957,
								"img": "https://picsum.photos/200/200?random=33A8FEaf-C1bc-8EC7-F37B-8b1C9CfbBcC2",
								"smallImg": "https://picsum.photos/40/40?random=91CcC34D-3BdA-b6c8-Ba9C-8EAa42ED1Bff",
								"switch": false,
								"percent": 92
							},
							{
								"uuid": "e9f4Fafd-9e9f-DE6b-6a1D-dAdeb9AA779E",
								"id": 56,
								"title": "接公。",
								"status": "draft",
								"author": "易军",
								"datetime": "1988-01-20 01:23:21",
								"pageViews": 946,
								"img": "https://picsum.photos/200/200?random=81624139-E72F-6A60-27fF-AbC5d3177a3A",
								"smallImg": "https://picsum.photos/40/40?random=eF3EB5Af-C49C-cAD5-15bE-966729F994B3",
								"switch": true,
								"percent": 89
							},
							{
								"uuid": "eDDdDADE-c327-4DFE-1fb4-EceD4a3fE9Cf",
								"id": 57,
								"title": "集。",
								"status": "published",
								"author": "姜杰",
								"datetime": "1981-03-07 23:40:24",
								"pageViews": 1762,
								"img": "https://picsum.photos/200/200?random=BF4AAdDd-D4Eb-347d-DbAA-2CDcaDeFe0c3",
								"smallImg": "https://picsum.photos/40/40?random=F4f0f4BA-aa54-c012-bdaC-152Ec35b3d66",
								"switch": false,
								"percent": 90
							},
							{
								"uuid": "181586fd-3165-3f6A-FC14-283B3f7B4CBC",
								"id": 58,
								"title": "合。",
								"status": "deleted",
								"author": "汪强",
								"datetime": "1999-03-29 02:55:30",
								"pageViews": 924,
								"img": "https://picsum.photos/200/200?random=81a17BEA-5C79-3fbB-2456-ADC74fced6cd",
								"smallImg": "https://picsum.photos/40/40?random=5b35488d-5E35-ee6B-D6Bd-1922f3Ee47fd",
								"switch": true,
								"percent": 91
							},
							{
								"uuid": "632AD94E-bE6B-Ac2e-AF61-7eeAc6537abc",
								"id": 59,
								"title": "长。",
								"status": "deleted",
								"author": "赖超",
								"datetime": "1992-02-26 21:20:07",
								"pageViews": 4219,
								"img": "https://picsum.photos/200/200?random=dB941C87-2d5d-4fa6-CD28-ab44Ccb73F88",
								"smallImg": "https://picsum.photos/40/40?random=ED2e8eb8-F6de-87B7-7188-Bc41B1A70247",
								"switch": false,
								"percent": 97
							},
							{
								"uuid": "AEfA1dBa-aF5B-BE91-22ED-97a3Abb4DdcA",
								"id": 60,
								"title": "究各。",
								"status": "deleted",
								"author": "易刚",
								"datetime": "2014-07-18 10:53:47",
								"pageViews": 1833,
								"img": "https://picsum.photos/200/200?random=58283F64-A876-79Cd-e3F4-dE7b6f29eEAF",
								"smallImg": "https://picsum.photos/40/40?random=5f52CC03-7162-a3b0-3aCA-88A3FC8Cb879",
								"switch": true,
								"percent": 91
							},
							{
								"uuid": "D56d44d5-C8c4-3DeB-8f9c-FFC67EB6dcd1",
								"id": 61,
								"title": "位更。",
								"status": "draft",
								"author": "张秀兰",
								"datetime": "1982-08-24 21:23:00",
								"pageViews": 3205,
								"img": "https://picsum.photos/200/200?random=78BE497E-FFd2-3aFB-D9dE-Dc7fEE34C269",
								"smallImg": "https://picsum.photos/40/40?random=d359b5A4-f695-d185-e8F6-CDe5BF2e5862",
								"switch": false,
								"percent": 92
							},
							{
								"uuid": "ABd5F41A-7706-eB89-85Bd-bA800FeBd27b",
								"id": 62,
								"title": "接争。",
								"status": "deleted",
								"author": "钱娟",
								"datetime": "2016-04-02 18:43:33",
								"pageViews": 3774,
								"img": "https://picsum.photos/200/200?random=FbBeCBdD-f9e1-BEdF-d4A4-bb19b9f9EE54",
								"smallImg": "https://picsum.photos/40/40?random=1aaf4d45-9BeF-e741-969E-bFab7CCCD5CE",
								"switch": false,
								"percent": 92
							},
							{
								"uuid": "e1BEBbEC-9fff-Fd9D-713d-BF5977988fAF",
								"id": 63,
								"title": "确离。",
								"status": "deleted",
								"author": "彭丽",
								"datetime": "1980-07-14 05:53:34",
								"pageViews": 1778,
								"img": "https://picsum.photos/200/200?random=31BaAC4F-EdcB-2Eda-CF9D-085f1f9fcA82",
								"smallImg": "https://picsum.photos/40/40?random=BA4626fe-Dd34-0ba1-E619-FB75cA88ef4F",
								"switch": true,
								"percent": 87
							},
							{
								"uuid": "85af7Bf4-A8d5-cc5d-15Db-53ab883C326E",
								"id": 64,
								"title": "被。",
								"status": "deleted",
								"author": "武娜",
								"datetime": "1971-08-01 14:52:56",
								"pageViews": 364,
								"img": "https://picsum.photos/200/200?random=EDF2eF6b-768E-cccC-BcFE-34c783B99C6E",
								"smallImg": "https://picsum.photos/40/40?random=dAA1DA11-F1d4-5cde-eF83-9afc81aa4ebe",
								"switch": true,
								"percent": 97
							},
							{
								"uuid": "6B1ce398-c43E-EDbe-bf4b-F5cF7FCfdfBD",
								"id": 65,
								"title": "安族。",
								"status": "deleted",
								"author": "周娟",
								"datetime": "1977-12-27 21:22:51",
								"pageViews": 2309,
								"img": "https://picsum.photos/200/200?random=398E3Ff8-B293-dff6-5Cdf-ef582698A23B",
								"smallImg": "https://picsum.photos/40/40?random=Ed1B222f-32CB-E8ef-018B-e9dB9F2775b2",
								"switch": false,
								"percent": 81
							},
							{
								"uuid": "BCD10fd9-Ee9f-a6A2-eC19-ee936e4DffbD",
								"id": 66,
								"title": "非况。",
								"status": "draft",
								"author": "罗强",
								"datetime": "1991-01-29 17:28:12",
								"pageViews": 3857,
								"img": "https://picsum.photos/200/200?random=2838AA2A-BA9E-f3F4-6EC8-CEb6cB2dAb34",
								"smallImg": "https://picsum.photos/40/40?random=c779BdC8-168C-f5d0-56C2-e04A64b74D2E",
								"switch": false,
								"percent": 88
							},
							{
								"uuid": "665CAEa5-5Bb1-8Dc7-4C2f-a4FF08EedAb6",
								"id": 67,
								"title": "毛。称",
								"status": "published",
								"author": "张芳",
								"datetime": "1976-06-04 12:44:11",
								"pageViews": 466,
								"img": "https://picsum.photos/200/200?random=991e6E7b-fd6d-FC6A-32D6-d5e3257e7fAF",
								"smallImg": "https://picsum.photos/40/40?random=2b90e381-3C65-FEFb-eeEd-2Dc1f7e1FBB9",
								"switch": false,
								"percent": 94
							}
						],
						totalCount: 999,
					};
					var r = [];
					var title = form.title;
					var author = form.author;
					for (var i = 0; i < list.data.length; i++) {
						var item = list.data[i];
						if ((title == '' || item.title.indexOf(title) != -1) && (author == '' || item.author.indexOf(
								author) != -1)) {
							r.push(item);
						}
					}
					var result = {
						data: r,
						totalCount: 999
					};
					return result;
				}
				this.loading = true;
				const {
					data,
					totalCount
				} = getListTemp(this.search);
				this.list = data;
				const imageList = [];
				if (data.length > 0) {
					data.forEach((item, index) => {
						imageList.push(item.img);
					});
				}
				this.imageList = imageList;
				this.total = totalCount;
				setTimeout(() => {
					this.loading = false;
				}, 500);
			},
			testMessage() {
				this.showToast("test1", "success");
			},
			testALert() {
				this.showMsg("11");
			},
			testConfirm() {
				this.confirm("你确定要执行该操作?", () => {
					/* 可以写回调; */
				});
			},
			testNotify() {
				common.tool.baseNotify("测试消息提示", "test", "success", "bottom-right");
			},
		},
	};
</script>
